<template>
  <div class="home">
    <div class="main">
      <p
        class="iconfont icon-fanhui"
        @click="$router.back()"
      ></p>
      <md-field>
        <md-input-item
          v-model="info.name"
          title="店铺名称"
          placeholder="请输入店铺名称"
        >
          <span slot="right" class="iconfont icon-shouye"></span>
        </md-input-item>
        <md-input-item
          v-model="info.address"
          title="店铺地址"
          placeholder="请输入店铺地址"
        >
          <span slot="right" class="iconfont icon-dizhi"></span>
        </md-input-item>

        <md-input-item
          v-model="latandlng"
          title="店铺定位"
          placeholder="请输入店铺定位"
          @focus="$router.push({ name: 'map' })"
        >
        </md-input-item>
        <md-input-item
          v-model="info.uid"
          title="店铺id"
          placeholder="请输入店铺id"
        >
        </md-input-item>

        <md-input-item
          v-model="info.time"
          title="开抢时间"
          placeholder="请输入开抢时间"
        >
        </md-input-item>
        <md-input-item
          v-model="info.num"
          title="餐额份量"
          placeholder="请输设置餐额份量"
        >
        </md-input-item>
        <md-input-item
          v-model="info.money"
          title="满多少优惠"
          placeholder="请输入满多少优惠"
        >
        </md-input-item>
        <md-input-item
          v-model="info.askdec"
          title="评论要求"
          placeholder="请输入评论要求"
        >
        </md-input-item>
        <md-input-item
          v-model="info.specask"
          title="特殊要求"
          placeholder="请输入特殊要求"
        >
        </md-input-item>
        <!-- <md-input-item
          v-model="info.state"
          title="商家状态"
          placeholder="请输入商家状态"
        >
        </md-input-item> -->
        <md-input-item
          v-model="info.bumoney"
          title="餐补"
          placeholder="请输入餐补"
        >
        </md-input-item>
      </md-field>
    </div>
    <div class="img">
      <p>店铺logo</p>
      <div class="logo">
        <!-- 图片 -->

        <md-image-reader name="front" @complete="onReaderComplete" />
        <div class="haha" v-if="info.img">
          <img :src="info.img" style="width: 100%; height: 100%" />
          <div class="close" @click="info.img = ''">x</div>
        </div>

        <div class="camera" v-else>
          <md-icon name="camera" size="md" color="#CCC"></md-icon>
        </div>
      </div>
    </div>
    <div class="ask" @click="fn">马上入驻</div>
  </div>
</template>

<script>
import { bookadd } from "@/apis/client";
export default {
  name: "add",
  data() {
    return {
      info: {
        name: "",
        uid: "",
        address: "",
        img: "https://sct.mykj2020.com/static/images/elm.jpg",
        num: "",
        money: "",
        time: "",
        askdec: "",
        specask: "",
        state: "",
        bumoney: "",
        lat: null,
        lng: null,
      },
      latandlng: "",
      imageList: "",
    };
  },
  methods: {
    async onReaderComplete(name, { dataUrl, blob, file }) {
      console.log(name, dataUrl, "图片");

      // file对象如何ajax 提交

      this.info.img = dataUrl;
    },

    confirmDate(columnsValue) {
      console.log("columnsValue", columnsValue);
      this.sltDate = columnsValue.map((item) => item.text).join("");

      this.liveInfo.checkInDate = new Date(
        columnsValue[0].value,
        columnsValue[1].value - 1,
        columnsValue[2].value
      ).getTime();
      console.log(this.liveInfo.checkInDate);
    },

    async fn() {
      let res = await bookadd(this.info);
      this.$toast.info("添加成功", 5000);
      console.log(res,'我是结果');
      console.log(this.info,'我是添加的对象');
    },
  },
  activated() {
    // 缓存路由激活的时候执行  请求写在这
    this.info.lat = this.$route.query.lat;
    this.info.lng = this.$route.query.lng;
    // console.log(this.info.lat, this.info.lat, "我是经纬度");

    if (this.$route.query.lat && this.$route.query.lng) {
      this.latandlng = `${this.$route.query.lat},${this.$route.query.lng}`;
    }
  },

  mounted() {},
};
</script>

<style lang="scss" scoped>
.home {
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  .main {
    ::v-deep .md-field-item-content {
      min-height: 0px;
      height: 100px;
    
    }
     ::v-deep  .md-input-item-input{
        text-indent: 80px;
      }
    p {
      padding: 0 50px;
      height: 130px;
      line-height: 130px;
      background-color: white;
      border-bottom: 1px solid rgb(148, 144, 144);
      font-size: 100px;
    }
    .iconfont {
      font-size: 60px;
    }
  }
  .img {
    width: 340px;
    height: 340px;
    margin: 0px auto 30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & > p {
      text-align: center;
    }
    .logo {
      width: 270px;
      height: 270px;
      text-align: center;
      margin: auto;
      border: 1px solid rgb(223, 207, 207);
      font-size: 20px;
      position: relative;
      .camera {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        line-height: 270px;
        & > ::v-deep .md-icon {
          font-size: 100px;
        }
      }
      .haha {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
        .close {
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          height: 50px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          color: #fff;
          z-index: 999;
          line-height: 50px;
          text-align: center;
        }
      }
    }
  }
  .ask {
    width: 938px;
    height: 128px;
    line-height: 128px;
    text-align: center;
    background: crimson;
    color: white;
    font-weight: bold;
    margin: auto;
  }
}
</style>